<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烧毁你的大脑</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .question {
            margin: 20px 0;
            padding: 15px;
            background-color: #f9f9f9;
            border-left: 4px solid #4CAF50;
        }
        .answer-input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .feedback {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }
        .correct {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .wrong {
            background-color: #f2dede;
            color: #a94442;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>烧毁你的大脑</h1>
        <div id="game-container">
            <div class="question" id="question">
                <p>加载题目中...</p>
            </div>
            <p>回答后可点击"显示答案"查看解析</p>
            <input type="text" class="answer-input" id="answer" placeholder="输入你的答案">
            <button id="submit">提交答案</button>
            <button id="showAnswer" style="display:none; margin-left:10px; background-color:#2196F3;">显示答案</button>
            <button id="nextLevel" style="display:none; margin-top:10px; background-color:#FF9800;">下一关</button>
            <div class="feedback" id="feedback"></div>
        <div id="loading" style="display: none; text-align: center; padding: 10px; color: #666; font-style: italic;">加载中...</div>
        </div>
    </div>

    <script>
        const API_KEY = process.env.API_KEY;
        let currentLevel = 1;
        const totalLevels = 10;
        let currentQuestion = "";
        let currentAnswer = "";

        document.addEventListener('DOMContentLoaded', () => {
            loadQuestion(currentLevel);
            
            document.getElementById('submit').addEventListener('click', () => {
                const userAnswer = document.getElementById('answer').value.trim();
                const loading = document.getElementById('loading');
                loading.style.display = 'block';
                checkAnswer(userAnswer);
            });

            document.getElementById('showAnswer').addEventListener('click', () => {
                showCorrectAnswer();
            });

            document.getElementById('nextLevel').addEventListener('click', () => {
                currentLevel++;
                loadQuestion(currentLevel);
            });
        });

        async function loadQuestion(level) {
            const loading = document.getElementById('loading');
            loading.style.display = 'block';
            if (level > totalLevels) {
                document.getElementById('question').innerHTML = '<p>恭喜你完成了所有关卡！你是真正的推理大师！</p>';
                document.getElementById('answer').style.display = 'none';
                document.getElementById('submit').style.display = 'none';
                return;
            }

            const payload = {
                model: 'deepseek-chat',
                messages: [
                    { role: "system", content: "你是一个推理专家，你现在要生成一个烧脑题目" },
                    { role: "user", content: `生成第${level}个烧脑题目，要求：
                    1. 包含看似不可能解决的矛盾；
                    2. 有多个约束条件；
                    3. 有引人入胜的故事背景；
                    4. 主题和难度与前几关不同；
                    5. 题目文字控制在100字以内` }
                ],
                stream: false
            };

            try {
                const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${API_KEY}`
                    },
                    body: JSON.stringify(payload)
                });

                const data = await response.json();
                currentQuestion = data.choices[0].message.content;
                currentAnswer = data.choices[0].message.content.split('答案：')[1] || "答案需要玩家推理得出";
                
                document.getElementById('question').innerHTML = `<p>第${level}关：${currentQuestion}</p>`;
                document.getElementById('answer').value = '';
                document.getElementById('feedback').style.display = 'none';
            } catch (error) {
        console.error('Error:', error);
        document.getElementById('question').innerHTML = '<p>加载题目失败，请刷新页面重试</p>';
    } finally {
        loading.style.display = 'none';
    }
        }

        function checkAnswer(userAnswer) {
            const feedback = document.getElementById('feedback');
            const showAnswerBtn = document.getElementById('showAnswer');
            const nextLevelBtn = document.getElementById('nextLevel');
            const loading = document.getElementById('loading');
            
            // 显示按钮
            showAnswerBtn.style.display = 'inline-block';
            
            // 这里可以添加更复杂的答案验证逻辑
            if (userAnswer.toLowerCase() === currentAnswer.toLowerCase()) {
                feedback.textContent = '太棒了！你的答案是正确的！';
            feedback.className = 'feedback correct';
            feedback.style.display = 'block';
            loading.style.display = 'none';
            nextLevelBtn.style.display = 'inline-block';
            } else {
                feedback.textContent = '答案不太对，点击"显示答案"查看解析。';
                feedback.className = 'feedback wrong';
                feedback.style.display = 'block';
                loading.style.display = 'none';
            }
        }

        async function showCorrectAnswer() {
            const feedback = document.getElementById('feedback');
            const nextLevelBtn = document.getElementById('nextLevel');
            const loading = document.getElementById('loading');
            loading.style.display = 'block';
            
            // 使用Deepseek API分析答案并获取正确解析
            const analysisPayload = {
                model: 'deepseek-chat',
                messages: [
                    { role: "system", content: "你是一个推理专家，负责分析用户答案并给出正确解析。" },
                    { role: "user", content: `题目：${currentQuestion}\n用户答案：${document.getElementById('answer').value}\n正确答案：${currentAnswer}\n请分析用户答案并解释正确答案的推理过程，控制在150字以内。` }
                ],
                stream: false
            };

            try {
                const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${API_KEY}`
                    },
                    body: JSON.stringify(analysisPayload)
                });

                const data = await response.json();
                const analysis = data.choices[0].message.content;
                
                feedback.innerHTML = `正确答案：${currentAnswer}<br><br>解析：${analysis}`;
                feedback.className = 'feedback correct';
                feedback.style.display = 'block';
                nextLevelBtn.style.display = 'inline-block';
         } catch (error) {
        console.error('Error:', error);
        feedback.textContent = `正确答案：${currentAnswer} (解析加载失败)`;
    } finally {
        loading.style.display = 'none';
    }
        }
    </script>
</body>
</html>